<template>
  <div class="m_right">
    <p></p>
    <div class="mem_tit">商品列表</div>
    <!-- 查询条件 -->
    <div style="margin: 20px 80px 20px;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="addProductViewShow = true"
            >新增商品</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="float: right; padding-right: 2rem">
      <!-- 新增-对话框 -->
      <el-dialog title="新增商品" :visible.sync="addProductViewShow">
        <el-form :model="addForm" :rules="rules" ref="addFormRef">
          <el-form-item label="商品分类" :label-width="formLabelWidth" style="display: block; margin-bottom: 10px;">
            <el-select
              v-model="category1"
              placeholder="请选择一级分类"
              v-if="firstCategoryList != null && firstCategoryList.length != 0 && parseInt(categoryType) &gt; 0"
              @change="checkChange(1)"
            >
              <el-option
                v-for="c in firstCategoryList"
                :key="c.id"
                :label="c.name"
                :value="c.id"
              ></el-option>
            </el-select>
            &nbsp;<a v-if="categoryType &gt; 1" @click="checkFirstCategory()"
              >选择一级分类</a
            >
            &nbsp;<a v-if="categoryType == 1" @click="checkSecondCategory()"
              >选择二级分类</a
            >
            <el-select
              v-model="category2"
              placeholder="请选择二级分类"
              v-if="secondCategoryList != null && secondCategoryList.length != 0 && parseInt(categoryType) &gt; 1"
              @change="checkChange(2)"
            >
              <el-option
                v-for="c in secondCategoryList.filter(
                  (item) => item.parentId == category1
                )"
                :key="c.id"
                :label="c.name"
                :value="c.id"
              ></el-option>
            </el-select>
            &nbsp;<a v-if="categoryType &gt; 2" @click="checkSecondCategory()"
              >选择二级分类</a
            >
            &nbsp;<a v-if="categoryType == 2" @click="checkThirdCategory()"
              >选择三级分类</a
            >
            <el-select
              v-model="category3"
              placeholder="请选择三级分类"
              v-if="thirdCategoryList != null && thirdCategoryList.length != 0 && parseInt(categoryType) &gt; 2"
            >
              <el-option
                v-for="c in thirdCategoryList.filter(
                  (item) => item.parentId == category2
                )"
                :key="c.id"
                :label="c.name"
                :value="c.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="商品名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item
            label="商品图片"
            :label-width="formLabelWidth"
            prop="image"
          >
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleImageChange"
              ref="uploadRef"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="商品单价"
            :label-width="formLabelWidth"
            prop="price"
          >
            <el-input v-model.number="addForm.price"></el-input>
          </el-form-item>
          <el-form-item
            label="商品库存"
            :label-width="formLabelWidth"
            prop="stock"
          >
            <el-input v-model.number="addForm.stock"></el-input>
          </el-form-item>
          <el-form-item
            label="商品描述"
            :label-width="formLabelWidth"
            prop="description"
          >
            <el-input v-model="addForm.description"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addProductViewShow = false">取 消</el-button>
          <el-button @click="resetForm">重 置</el-button>
          <el-button type="primary" @click="submitProduct()">新 增</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      :data="productList"
      style="width: 90%"
    >
      <el-table-column
        label="商品名称"
        header-align="center"
        align="center"
        min-width="180px"
      >
        <template slot-scope="scope">
          <a
            href="javascript:;"
            @click="productModifyOrShow('show', scope.row.id)"
            v-html="scope.row.name"></a
          >
        </template>
      </el-table-column>
      <el-table-column
        label="商品图片"
        header-align="center"
        align="center"
        min-width="180px"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="url + scope.row.fileName"
            fit="cover"
            ><div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i></div
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="库存"
        header-align="center"
        align="center"
        min-width="80px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.stock }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="价格"
        header-align="center"
        align="center"
        width="180px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.price }}元</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="180px"
      >
        <template slot-scope="scope">
          <!-- 这里直接在修改按钮绑定原生bom点击事件，展示modifyDialog同时展示传入id，直接在data中的newsList数组中查询到该资讯，免去服务端查询-->
          <el-button
            type="info"
            size="mini"
            @click.native="
              productModifyOrShow('modify', scope.row.id), (newImageUrl = '')
            "
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="deleteNews(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改-展示 对话框 -->
    <el-dialog
      :title="`${showOrModify == 'show' ? '展示' : '修改'}商品`"
      :visible.sync="modifyProductViewShow"
    >
      <el-form :model="modifyForm">
        <el-form-item
          label="商品分类:"
          :label-width="formLabelWidth" style=""
        >
          <!-- show -->
          <span v-show="showOrModify == 'show'">{{
            calculateCategory(
              modifyForm.categoryLevel1Id,
              modifyForm.categoryLevel2Id,
              modifyForm.categoryLevel3Id
            ) || "暂无"
          }}</span>
          <!-- modify -->
          <template v-if="showOrModify == 'modify'">
            <el-select v-model="modifyForm.categoryLevel1Id" v-if="firstCategoryList" @change="modify_categoryChange(1)">
              <el-option label="[一级分类](必选)" :value="0"></el-option>
              <el-option v-for="first in firstCategoryList" :key="first.id" :label="first.name" :value="first.id"></el-option>
            </el-select>
            <el-select v-model="modifyForm.categoryLevel2Id" v-if="secondCategoryList" @change="modify_categoryChange(2)">
              <el-option label="[二级分类]" :value="0"></el-option>
              <el-option v-for="second in secondCategoryList.filter((item) => item.parentId == modifyForm.categoryLevel1Id)" :key="second.id" :label="second.name" :value="second.id"></el-option>
            </el-select>
            <el-select v-model="modifyForm.categoryLevel3Id" v-if="thirdCategoryList" @change="modify_categoryChange(3)">
              <el-option label="[三级分类]" :value="0"></el-option>
              <el-option v-for="third in thirdCategoryList.filter((item) => item.parentId == modifyForm.categoryLevel2Id)" :key="third.id" :label="third.name" :value="third.id"></el-option>
            </el-select>
          </template>
          
        </el-form-item>
        <el-form-item label="商品名称:" :label-width="formLabelWidth">
          <el-input
            v-model="modifyForm.name"
            v-show="showOrModify == 'modify'"
          ></el-input>
          <span v-show="showOrModify == 'show'">{{ modifyForm.name }}</span>
        </el-form-item>
        <el-form-item label="商品图片:" :label-width="formLabelWidth">
          <el-image
            style="width: 70px; height: 70px"
            :src="url + modifyForm.fileName"
            fit="cover"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <!-- 预览新图片 -->
          <el-image
            v-if="newImageUrl"
            style="width: 70px; height: 70px"
            :src="newImageUrl"
            fit="cover"
            ><div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i></div
          ></el-image>
          <input
            type="file"
            v-show="showOrModify == 'modify'"
            @change="handleModifyImageChange"
          />
        </el-form-item>
        <el-form-item label="单价:" :label-width="formLabelWidth">
          <el-input
            v-model.number="modifyForm.price"
            v-show="showOrModify == 'modify'"
          ></el-input>
          <span v-show="showOrModify == 'show'">{{ modifyForm.price }}</span>
        </el-form-item>
        <el-form-item label="库存:" :label-width="formLabelWidth">
          <el-input
            v-model.number="modifyForm.stock"
            v-show="showOrModify == 'modify'"
          ></el-input>
          <span v-show="showOrModify == 'show'">{{ modifyForm.stock }}</span>
        </el-form-item>
        <el-form-item label="描述:" :label-width="formLabelWidth">
          <el-input
            v-model="modifyForm.description"
            v-show="showOrModify == 'modify'"
          ></el-input>
          <span v-show="showOrModify == 'show'">{{
            modifyForm.description || "暂无"
          }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="showOrModify == 'modify'">
        <el-button @click="(modifyProductViewShow = false), (newImageUrl = '')"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitModifyProduct">修 改</el-button>
      </div>
    </el-dialog>
    <br />
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        @current-change="handleCurrentChange"
        :page-size="pageInfo.pageSize"
        :current-page="1"
        layout="prev, pager, next, jumper"
        :total="pageInfo.totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Pagination,
  Table,
  TableColumn,
  Loading,
  Dialog,
  Form,
  FormItem,
  Input,
  Image,
  Upload,
  Select,
  Option,
  DatePicker,
} from "element-ui";
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog);
Vue.use(Image);
Vue.use(Form);
Vue.use(Input);
Vue.use(FormItem);
Vue.use(Upload);
Vue.use(Select);
Vue.use(Option);
Vue.use(Loading.directive);
Vue.use(DatePicker);

export default {
  data() {
    // 自定义价格校验规则
    const validatePrice = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback(new Error("请输入商品单价"));
      } else if (!Number.isFinite(value)) {
        callback(new Error("价格必须是数字"));
      } else if (value < 0) {
        callback(new Error("价格不能为负数"));
      } else if (value.toString().split(".")[1]?.length > 2) {
        callback(new Error("价格最多保留两位小数"));
      } else {
        callback();
      }
    };

    // 自定义库存校验规则
    const validateStock = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback(new Error("请输入商品库存"));
      } else if (!Number.isInteger(value)) {
        callback(new Error("库存必须是整数"));
      } else if (value < 0) {
        callback(new Error("库存不能为负数"));
      } else {
        callback();
      }
    };
    return {
      pageInfo: {},
      productList: [],
      pageNum: 1,
      pageSize: 10,
      loading: false, // 新增 loading 状态

      // 查询表单
      searchForm: {
        name: "",
        createTime: "",
      },
      searchTitle: "",
      //新增商品表单
      imageUrl: "", //商品图url
      selectedFile: null, //存储选中的文件对象
      categoryType: 1, //商品分类级别，为1则表示当前分类为1级分类
      category1: 0, //一级分类
      category2: 0, //二级分类
      category3: 0, //三级分类
      finalCategory: 0, //商品最终提交上去的分类
      firstCategoryList: [], //一级分类列表
      secondCategoryList: [], //二级分类列表
      thirdCategoryList: [], //三级分类列表
      addForm: {
        name: "",
        price: 0,
        stock: 0,
        description: "",
      },
      addProductViewShow: false,
      //修改
      modifyForm: {
        categoryLevel1Id: 0,
        categoryLevel2Id: 0,
        categoryLevel3Id: 0,
        createTime: null,
        delFlag: 0,
        description: '',
        fileName: '',
        id: null,
        imageUrl: '',
        name: '',
        price: '',
        stock: '',
        updateTime: ''
      },
      newImage: null, // 新选择的图片文件
      newImageUrl: "", // 新图片预览URL
      modifyProductViewShow: false,
      //展示还是修改
      showOrModify: "show",
      formLabelWidth: "20%",
      //图片路径
      url: sessionStorage.getItem("imagesDir"),

      //校验
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
        price: [{ required: true, validator: validatePrice, trigger: "blur" }],
        stock: [{ required: true, validator: validateStock, trigger: "blur" }],
        description: [
          { required: true, message: "请输入商品描述", trigger: "blur" },
          {
            min: 10,
            max: 500,
            message: "长度在 10 到 500 个字符",
            trigger: "blur",
          },
        ],
        categoryId: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        image: [
          {
            validator: (_, value, callback) => {
              if (!this.selectedFile) callback(new Error("请上传商品图片"));
              else callback();
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getProductList(this.pageNum, this.pageSize);
    },
    getProductList(pageNum, pageSize) {
      // √
      this.loading = true; // 开始加载时显示 loading
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
      };
      // 添加搜索条件
      if (this.searchForm.name) {
        params.name = this.searchForm.name;
      }
      if (this.searchForm.createTime) {
        params.createTime = this.searchForm.createTime;
      }
      Vue.prototype;
      this.$axios({
        url: "/api/product/pageinfo",
        method: "POST",
        data: params,
      })
        .then((rs) => {
          this.productList = rs.data.pageinfo.list;
          this.pageInfo = rs.data.pageinfo;
          this.pageNum = this.pageInfo.pageNum;
        })
        .finally(() => {
          this.loading = false; // 加载完成后隐藏 loading
        });
    },

    // 查询功能
    onSearch() {
      this.pageNum = 1;
      this.getProductList(this.pageNum, this.pageSize);
    },
    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        name: "",
        createTime: "",
      };
      this.pageNum = 1;
      this.getProductList(this.pageNum, this.pageSize);
    },
    productModifyOrShow(op, id) {
      //修改和展示公用一个对话框
      this.showOrModify = op;
      this.modifyProductViewShow = true;
      this.productList.forEach((i) => {
        if (i.id == id) {
          this.modifyForm.categoryLevel1Id = i.categoryLevel1Id,
          this.modifyForm.categoryLevel2Id = i.categoryLevel2Id,
          this.modifyForm.categoryLevel3Id = i.categoryLevel3Id,
          this.modifyForm.createTime = i.createTime,
          this.modifyForm.delFlag = i.delFlag,
          this.modifyForm.description = i.description,
          this.modifyForm.fileName = i.fileName,
          this.modifyForm.id = i.id,
          this.modifyForm.imageUrl = i.imageUrl,
          this.modifyForm.name = i.name,
          this.modifyForm.price = i.price,
          this.modifyForm.stock = i.stock,
          this.modifyForm.updateTime = i.updateTime
        }
      });
    },
    //新增商品  ------------begin--------------

    //获取所有一级分类
    getFirstCategoryList() {
      this.$axios({
        url: "/api/category/first",
        method: "POST",
      }).then((rs) => {
        this.firstCategoryList = rs.data.categories;
        this.category1 = this.firstCategoryList[0].id;
      });
    },
    //获取所有二级分类
    getSecondCategoryList() {
      this.$axios({
        url: "/api/category/second",
        method: "POST",
        data: {},
      }).then((rs) => {
        this.secondCategoryList = rs.data.categories;
      });
    },
    //获取所有三级分类
    getThirdCategoryList() {
      this.$axios({
        url: "/api/category/third",
        method: "POST",
        data: {},
      }).then((rs) => {
        this.thirdCategoryList = rs.data.categories;
      });
    },
    //商品图片相关 op
    // 添加这个正确的方法
    handleImageChange(file) {
      this.selectedFile = file.raw; // 存储原始文件对象
      this.imageUrl = URL.createObjectURL(this.selectedFile);
      this.addForm.image = this.selectedFile.name; // 绑定文件名到表单
      this.$refs.addFormRef.clearValidate("image");
    },
    checkFirstCategory() {
      this.categoryType = 1;
      this.category2 = 0;
      this.category3 = 0;
    },
    checkSecondCategory() {
      if (this.category1 == 0) {
        this.$message.error("请选择一个一级分类！");
        return;
      }
      let arr = this.secondCategoryList.filter(
        (item) => item.parentId == this.category1
      );
      if (arr.length == 0) {
        this.$message.error("当前一级分类没有二级子分类");
        return;
      }
      this.category2 = arr[0].id;
      this.categoryType = 2;
      this.category3 = 0;
    },
    checkThirdCategory() {
      if (this.category2 == 0) {
        this.$message.error("当前二级分类没有三级子分类");
        return;
      }
      let arr = this.thirdCategoryList.filter(
        (item) => item.parentId == this.category2
      );
      if (arr.length == 0) {
        this.$message.error("当前二级分类没有三级子分类");
        return;
      }
      this.category3 = arr[0].id;
      this.categoryType = 3;
    },
    checkChange(type) {
      //type表示当前是几级分类变动
      //获取当前变动的分类id
      let nowId =
        type == 1
          ? this.category1
          : type == 2
          ? this.category2
          : this.category3;
      //防止麻烦直接跳转到当前分类
      if (type == 1) {
        this.checkFirstCategory();
        this.category1 = nowId;
      } else if (type == 2) {
        this.checkSecondCategory();
        this.category2 = nowId;
      } //三级分类不用考虑
    },
    // 添加重置表单方法
    resetForm() {
      this.addForm = {
        name: "",
        price: 0,
        stock: 0,
        description: "",
      };
      this.category1 = 0;
      this.categoryType = 1;
      this.imageUrl = "";
      this.selectedFile = null; // 重置文件选择
      this.$refs.uploadRef.clearFiles();
      this.$refs.addFormRef.clearValidate();
    },
    submitProduct() {
      if (this.category1 == 0) {
        this.$message.error("请选择分类！");
      }
      // 先进行表单验证
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) {
          this.$message.error("请检查表单数据");
          return;
        }

        // 直接使用selectedFile而非检查uploadFiles
        if (!this.selectedFile) {
          this.$message.error("请选择商品图片");
          return;
        }

        // 创建 FormData，一次性提交所有数据
        const formData = new FormData();
        // 1. 添加图片文件
        formData.append("image", this.selectedFile); // 直接使用存储的文件
        // 2. 添加其他表单数据
        formData.append("name", this.addForm.name);
        formData.append("price", this.addForm.price.toString());
        formData.append("stock", this.addForm.stock.toString());
        formData.append("description", this.addForm.description);
        formData.append("categoryLevel1Id", this.category1);
        formData.append("categoryLevel2Id", this.category2);
        formData.append("categoryLevel3Id", this.category3);
        // 提交
        this.$axios({
          url: "/api/product/add",
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }).then((rs) => {
          console.log("商品新增结果：", rs);
          if (rs.data.code === 5200) {
            this.$message.success("商品添加成功");
            this.addProductViewShow = false;
            this.resetForm();
            window.location.reload(); // 关键点！
          }
        });
      });
    },
    //新增商品  ------------end--------------

    //修改商品 ************begin**************
    calculateCategory(id1, id2, id3) {
      let name = ``;
      if (id1 != 0) {
        this.firstCategoryList.forEach((i) => {
          if (i.id == id1) name += `${i.name}`;
        });
      }
      if (id2 != 0) {
        this.secondCategoryList.forEach((i) => {
          if (i.id == id2) name += ` - ${i.name}`;
        });
      }
      if (id3 != 0) {
        this.thirdCategoryList.forEach((i) => {
          if (i.id == id3) name += ` - ${i.name}`;
        });
      }
      return name;
    },
    // 处理修改时的图片选择
    handleModifyImageChange(e) {
      const file = e.target.files[0];
      if (file) {
        this.newImage = file;
        // 生成预览URL（可选）
        this.newImageUrl = URL.createObjectURL(file);
        // 清空输入框值以允许重复选择相同文件
        e.target.value = null;
      }
    },
    modify_categoryChange(categoryType) {
      if(categoryType == 1) {
        this.modifyForm.categoryLevel2Id = this.modifyForm.categoryLevel3Id = 0; 
      } else if(categoryType == 2) {
        this.modifyForm.categoryLevel3Id = 0;
      }
    },
    submitModifyProduct() {
      //分类必须保证至少存在一级分类
      if(this.modifyForm.categoryLevel1Id == 0) {
          this.$message.warning("必须选择一个一级分类");
          return;
      }
      const formData = new FormData();
      // 添加图片：有新图片时上传，否则保留原路径
      if (this.newImage) {
        formData.append("newImg", this.newImage);
      }

      // 添加其他表单数据
      formData.append("id", this.modifyForm.id);
      formData.append("name", this.modifyForm.name);
      formData.append("price", this.modifyForm.price);
      formData.append("stock", this.modifyForm.stock);
      formData.append("fileName", this.modifyForm.fileName);
      formData.append("description", this.modifyForm.description);
      formData.append("categoryLevel1Id", this.modifyForm.categoryLevel1Id);
      formData.append("categoryLevel2Id", this.modifyForm.categoryLevel2Id);
      formData.append("categoryLevel3Id", this.modifyForm.categoryLevel3Id);

      // 提交请求
      this.$axios({
        url: "/api/product/update",
        method: "post",
        data: formData,
        // headers: {'Content-Type': 'multipart/form-data'}
      })
        .then((rs) => {
          if (rs.data.code === 5200) {
            this.$message.success("商品修改成功");
            this.modifyProductViewShow = false;
            this.getProductList(this.pageNum, this.pageSize);
          }
        })
        .catch((error) => {
          console.error("修改失败:", error);
          this.$message.error("商品修改失败");
        });
    },
    //修改商品 ************修改 end**************

    //~~~~~~~~~~~~~~~~删除 begn~~~~~~~~~~~~~~~~
    deleteNews(id) {
      this.$messageBox
        .confirm("是否要删除该商品？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          // 用户点击了确定，执行删除操作
          this.$axios({
            url: "/api/product/delete",
            method: "post",
            data: { id: id },
          })
            .then((rs) => {
              if (rs.data.code === 5200) {
                this.$message.success("商品删除成功！");
                this.modifyProductViewShow = false;
                this.getProductList(this.pageNum, this.pageSize);
              }
            })
            .catch((error) => {
              console.error("删除失败:", error);
              this.$message.error("商品删除失败");
            });
        })
        .catch(() => {
          // 用户点击了取消，不执行任何操作
          this.$message.info("已取消删除");
        });
    },
    //~~~~~~~~~~~~~~~~删除 end~~~~~~~~~~~~~~~~
  },
  created() {
    this.getProductList(this.pageNum, this.pageSize);
    this.getFirstCategoryList();
    this.getSecondCategoryList();
    this.getThirdCategoryList();
  },
  activated() {
    if (!this.newsList.length) {
      this.getProductList(this.pageNum, this.pageSize);
    }
  },
};
</script>
    
<style>
.page {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

/* 文件上传样式 el自带样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
a {
  color: rgb(41, 92, 202);
}
</style>